<template>
  <div>
    <!-- 导航 -->
    <div class="nav">
      <h1 @click="$router.go(-1)"><i></i></h1>
      <div class="sex">
        <p>我的书架</p>
        <p>最近阅读</p>
      </div>
      <div class="img">
        <router-link tag="a" to="/search"
          ><img src="../assets/img/search_black.gif" alt=""
        /></router-link>
        <van-cell @click="showPopup">
          <a><img src="../assets/img/bar.gif" alt="" /></a>
        </van-cell>
        <van-popup v-model="show" position="top" :style="{ height: '30%' }">
          <div class="guide-content">
            <ul>
              <router-link tag="li" to="/boy">
                <i></i>
                <p>首页</p>
              </router-link>
              <router-link tag="li" to="/page1">
                <i></i>
                <p>分类</p>
              </router-link>
              <router-link tag="li" to="/page2">
                <i></i>
                <p>排行榜</p>
              </router-link>
              <router-link tag="li" to="/page3">
                <i></i>
                <p>免费</p>
              </router-link>
              <router-link tag="li" to="/page4">
                <i></i>
                <p>完本</p>
              </router-link>
              <router-link tag="li" to="/userinfo">
                <i></i>
                <p>账户</p>
              </router-link>
            </ul>
          </div>
        </van-popup>
      </div>
    </div>

    <!-- 书架内容 -->
    <div class="bookshelf_content">
      <div class="bookshelf_lists">
        <router-link
          tag="div"
          :to="'/details?id=' + item.id"
          class="bookshelf_item"
          v-for="item in book_content"
          :key="item.id"
        >
          <div class="img">
            <img :src="item.img" alt="" />
          </div>
          <div class="text">
            <div class="text_top">
              <p>{{ item.name }}</p>
              <p>继续阅读<span class="iconfont icon-dayuhao"></span></p>
            </div>
            <div class="text_author">
              <span class="iconfont icon-bianzu15"></span>
              <span>{{ item.author }}</span>
              <div type="primary" @click.stop="Dialog(item.id)">
                <span class="iconfont icon-cuowu"></span>
              </div>
            </div>
            <div class="text_bottom">
              <p>{{ item.update }}</p>
              <p>{{ item.update_time }}</p>
            </div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { getbook_dataData } from "../api/home.js";
export default {
  data() {
    return {
      show: false,
      book_content: [
        {
          id: 1201,
          img: "https://bookcover.yuewen.com/qdbimg/349573/1029006481/90",
          name: "不科学御兽",
          author: "轻泉流响 | 读至第一章：御兽时代章",
          update: "更新至 第619章：逐渐明白一切",
          update_time: "21小时前",
        },
        {
          id: 100,
          img: "https://bookcover.yuewen.com/qdbimg/349573/1015648531/90",
          name: "我真没想重生啊",
          author: "柳岸花又明 | 读至1、喝酒不开车章",
          update: "更新至 新书今天上架，大家去贡献个首订吧。",
          update_time: "7个月前",
        },
        {
          id: 101,
          img: "https://bookcover.yuewen.com/qdbimg/349573/1018027842/90",
          name: "万族之劫",
          author: "老鹰吃小鸡 | 读至七夕请假陪媳妇章",
          update: "更新至 新书《星门》发布！",
          update_time: "1年前",
        },
        {
          id: 102,
          img: "https://bookcover.yuewen.com/qdbimg/349573/158872/90",
          name: "隐杀",
          author: "愤怒的香蕉 | 读至蜜月沙拉",
          update: "更新至 终章 记忆残片",
          update_time: "1年前",
        },
      ],
      value: this.$route.query.user,
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },
    del(id) {
      let index = this.book_content.findIndex((item) => item.id == id);
      this.book_content.splice(index, 1);
      this.$toast("删除书籍成功");
    },
    Dialog(id) {
      this.$dialog
        .confirm({
          title: "提醒",
          message: "确认删除书籍吗？",
        })
        .then(() => {
          let index = this.book_content.findIndex((item) => item.id == id);
          this.book_content.splice(index, 1);
          this.$toast("删除书籍成功");
        })
        .catch(() => {
          console.log("取消");
        });
    },
  },
  created() {
    if (this.$route.query.user) {
      getbook_dataData().then((data) => {
        console.log(data.data);
        let index = data.data.findIndex((item) => item.id == this.value);
        this.book_content.push({
          id: data.data[index].id,
          img: data.data[index].img,
          name: data.data[index].name,
          author: data.data[index].author,
          update: "更新至 终章 记忆残片",
          update_time: "1年前",
        });
      });
      this.$toast("加入书架成功");
    }
  },
};
</script>

<style lang="scss" scoped>
// 书架内容
.bookshelf_content {
  .bookshelf_lists {
    .bookshelf_item {
      display: flex;
      padding: 10px;
      padding-left: 0;
      margin-left: 10px;
      border-bottom: 1px solid #cccccc;
      .img {
        width: 54px;
        height: 72px;
        img {
          width: 54px;
          height: 72px;
        }
      }
      .text {
        flex: 1;
        padding-left: 8px;
        .text_top {
          display: flex;
          justify-content: space-between;
          padding: 4px 0;
          padding-right: 3px;
          p {
            &:nth-child(1) {
              font-size: 16px;
              font-weight: 600;
            }
            &:nth-child(2) {
              color: #969ba3;
              font-size: 14px;
            }
          }
        }
        .text_author {
          color: #969ba3;
          font-size: 14px;
          padding: 4px 0;
          position: relative;
          display: flex;
          &::before {
            content: "";
            position: absolute;
            width: 4px;
            height: 4px;
            left: -6px;
            top: 34px;
            border-radius: 50%;
            background-color: #ed424b;
          }
          .iconfont {
            margin-right: 3px;
          }
          span {
            &:nth-child(2) {
              flex: 1;
            }
            &:nth-child(3) {
              margin-right: 6px;
            }
          }
          & > div {
            margin-right: 6px;
          }
        }
        .text_bottom {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          p {
            color: #969ba3;
            &:nth-child(1) {
              flex: 8;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              position: relative;
            }
            &:nth-child(2) {
              flex: 2;
              text-align: center;
            }
          }
        }
      }
    }
  }
}

/* 导航 */
.nav {
  .van-cell {
    padding: 0;
  }
  display: flex;
  padding: 9px 10px;
  justify-content: space-between;
  background-color: #fff;
  h1 {
    height: 26px;
    line-height: 26px;
    font-size: 18px;
    color: #ee2737;
    font-weight: bold;
    display: block;
    display: flex;
    i {
      display: block;
      width: 9px;
      height: 18px;
      background: url("../assets/img/arrow_da.gif") center center no-repeat;
      margin-top: 5px;
    }
  }
  .sex {
    display: flex;
    height: 24px;
    line-height: 24px;
    border: 1px solid #ed424b;
    p {
      &:nth-child(1) {
        padding: 0 12px;
        background-color: #ed424b;
        font-size: 12px;
        color: #fff;
      }
      &:nth-child(2) {
        padding: 0 12px;
        background-color: #fff;
        font-size: 12px;
        color: #ed424b;
      }
    }
  }
  .img {
    display: flex;
    img {
      width: 16px;
      height: 16px;
      padding-top: 6px;
    }
    a {
      &:nth-child(1) {
        img {
          margin-right: 12px;
        }
      }
    }
  }
}

// 导航栏的显示与隐藏
.van-popup {
  text-align: center;
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 33.3%;
      text-align: center;
      margin-top: 30px;
      &:nth-child(2) {
        i {
          background-position: -63px -28px;
          width: 24px;
          height: 24px;
          background-size: 87px 87px;
        }
      }
      &:nth-child(3) {
        i {
          background-position: 0 0;
          width: 27px;
          height: 26px;
          background-size: 87px 87px;
        }
      }
      &:nth-child(4) {
        i {
          background-position: 0 -30px;
          width: 26px;
          height: 26px;
          background-size: 87px 87px;
        }
      }
      &:nth-child(5) {
        i {
          background-position: 0 -60px;
          width: 20px;
          height: 27px;
          background-size: 87px 87px;
        }
      }
      &:nth-child(6) {
        i {
          background-position: -63px 0;
          width: 24px;
          height: 24px;
          background-size: 87px 87px;
        }
      }
      i {
        margin: 0 auto;
        display: block;
        background: url("https://qidian.gtimg.com/qdm/icon/common/sprite@2x.f5569.png");
        background-position: -31px 0;
        background-size: 87px 87px;
        width: 28px;
        height: 25px;
      }
      p {
        margin-top: 10px;
      }
    }
  }
}
</style>
